<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>基础资料</title>
    <style>
        body {
            color: #666;
        }

        .halfhalfinput {
            width: 25%;
        }

        .threehalfinput {
            width: 12.5%;
        }

        .red-required {
            color: red;
        }

        .line-title {
            margin-left: 6px;
            padding-top: 10px;
            padding-bottom: 10px;
            color: #333;
        }

        .tip-box {
            border: 1px solid #ddd;
            width: 95%;
            margin-left: 6px;
        }
    </style>
</head>
<body>


<form class="layui-form" lay-filter="example">
    <input type="hidden" name="userId">
    <div style="margin-left: 6px;padding: 16px 0 ;">
        <h5 style="border-left: 2px solid #88B7E0;">&nbsp;&nbsp;基本信息</h5>
    </div>

    <div class="tip-box">
        <p style="margin: 6px 12px">请完善以下信息,方便我们更好的为您服务</p>
    </div>
    <div class="line-title">基础资料</div>
    <div class="layui-form-item" style="margin-bottom: 0;">
        <label class="layui-form-label"><span class="red-required">* </span>会员身份</label>
        <div class="layui-form-label">
            <p style="text-align: left;width: 800px;" id="userType"></p>
        </div>
    </div>
    <div class="layui-form-item" style="margin-bottom: 0;">
        <label class="layui-form-label"><span class="red-required">* </span>真实姓名</label>
        <div class="layui-form-label">
            <p style="text-align: left;width: 800px;" id="name"></p>
        </div>
    </div>
    <div class="line-title">用户资料</div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="font-size: 10px;"><span class="red-required">* </span>主要行业应用</label>
        <div class="layui-input-block layui-input-block threehalfinput">
            <select name="industryApp" required>
                <option value="">请选择</option>
                <option value="互联网">互联网</option>
                <option value="房地产">房地产</option>
                <option value="电子商务">电子商务</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label"><span class="red-required">* </span>主营业务</label>
        <div class="layui-input-block layui-input-block halfhalfinput">
            <input type="text" name="mainBusiness" placeholder="主营业务" required lay-verify="mainBusiness"
                   class="layui-input layui-input-sm">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">网址</label>
        <div class="layui-input-block layui-input-block halfhalfinput">
            <input type="text" name="website" placeholder="www.baidu.com" lay-verify="website" class="layui-input layui-input-sm">
        </div>
    </div>
    <div class="line-title">联系信息</div>
    <div class="layui-form-item">
        <label class="layui-form-label">国家/地区</label>
        <div class="layui-input-block layui-input-block halfhalfinput">
            <input type="text" name="country" placeholder="中国" readonly lay-verify="country" class="layui-input layui-input-sm">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"><span class="red-required">* </span>所在地区</label>
        <div class="layui-input-block halfhalfinput">
            <input type="hidden" name="areaId" area-init="{length:3}" id="areaId" lay-verify="areaId"
                   class="layui-input layui-input-sm"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">街道地址</label>
        <div class="layui-input-block layui-input-block halfhalfinput">
            <input type="text" name="address" placeholder="街道地址" lay-verify="address" class="layui-input layui-input-sm">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-block layui-input-block halfhalfinput">
            <input type="text" name="concatPhone" placeholder="例如：张三" lay-verify="concatPhone"
                   class="layui-input layui-input-sm">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">联系电话</label>
        <div class="layui-input-block layui-input-block halfhalfinput">
            <input type="text" name="concatName" placeholder="例如：8605718888" lay-verify="concatName"
                   class="layui-input layui-input-sm">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block layui-input-block halfhalfinput">
            <input type="text" name="concatEmail" placeholder="例如：86057188888888" lay-verify="concatEmail"
                   class="layui-input layui-input-sm">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" id="submit" class="layui-btn  layui-btn-normal" lay-submit="form-submit"
                    lay-filter="form-submit">保存
            </button>
        </div>
    </div>
</form>

</body>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    var methods;
    layui.use(['form', 'area'], function () {
        var form = layui.form;
        var tools = layui.tools;
        var $ = layui.$;
        var area = layui.area;
        methods = {
            init() {
                //表单赋值
                tools.request({
                    url: '/plm/user/accountInfo',
                    method: "post"
                }).done(function (res) {
                    if (res.code == 0) {
                        form.val('example', res.data);
                        $("#userType").html(res.data.userType);
                        $("#name").html(res.data.realName);
                        $("#userId").html(res.data.userId);
                        $("#areaId").html(res.data.areaId);
                        area.init();
                    } else {
                        layer.msg(res.msg, {icon: 5});
                    }
                });
            },
            doSubmit() {
                // 表单提交事件
                form.on('submit(form-submit)', function (data) {
                    console.log(data);
                    tools.request({
                        url: '/plm/user/updateAccountInfo',
                        params: data.field,
                        method: "post"
                    }).done(function (res) {
                        if (res.code == 0) {
                            layer.msg("操作成功", {icon: 1});
                        } else {
                            layer.msg("操作失败", {icon: 5});
                        }
                    })
                    return false;
                });
            }
        }
        methods.init();
        methods.doSubmit();
    });
</script>
</html>